
<!--
表格模板
将自己所需要显示的表格页面的路径，填入对应导航栏选项的index值中
-->
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/vue/2.4.2/vue.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
    <script type="text/javascript" src="static/js/vue.js"></script>
    <script type="text/javascript" src="static/js/index.js"></script>
    <link rel="stylesheet" href="static/css/index.css">
    <title>Document</title>
</head>


<style>
    .el-table .warning-row {
        background: rgb(126, 238, 35);
    }

    .el-table .success-row {
        background: #f0f9eb;
    }

    /*
    包裹表格div的距離外邊距的距離
    width:85% 為寬度
    margin：為左边距
    margin-top為右边距
    */

    #app {
        width: 100%;

    }

    #appso{
        margin-top: 15px;
    }


</style>

<body>

<!--新增产品模态框-->
<div id="addproductInfo">
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" fullscreen="true">
        <el-form :model="form"  :inline="true">
            <el-row>
                <el-col :span="24"><lable>产品基本信息：</lable></el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="8">
            <el-form-item label="产品类型"   :label-width="formLabelWidth">
                <el-select v-model="form.productType" style="width: 180px" placeholder="请选择">
                    <el-option label="车贷" value="车贷"></el-option>
                    <el-option label="信贷" value="信贷"></el-option>
                </el-select>
            </el-form-item>
                </el-col>
                <el-col :span="8">
            <el-form-item label="产品名称"  :label-width="formLabelWidth">
                <el-input v-model="form.productName" style="width: 180px" autocomplete="off" placeholder="请输入名称"></el-input>
            </el-form-item>
                </el-col>
                <el-col :span="8">
            <el-form-item label="产品来源"  :label-width="formLabelWidth">
<!--                <el-select   value-key="id"   v-model="form.ditchNums" style="width: 180px" placeholder="请选择来源渠道">-->
<!--                    <el-option label="中国银行" value="1"></el-option>-->
<!--                    <el-option label="融360" value="2"></el-option>-->
<!--                </el-select>-->
                <el-select value-key="id" v-model="form.ditchNums" placeholder="请选择渠道数">
                    <el-option
                            v-for="item in Mond"
                            :key="item.id"
                            :label="item.ditchAllname"
                            :value="item.id">
                    </el-option>
                </el-select>
            </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="产品描述"  :label-width="formLabelWidth">
                        <el-input v-model="form.productDescp" style="width: 540px" autocomplete="off" placeholder=""></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="24">还款方式&利率</el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="还款方式"  :label-width="formLabelWidth">
                        <el-select v-model="form.refundType" style="width: 180px" placeholder="选择还款方式">
                            <el-option label="先息后本" value="先息后本"></el-option>
                            <el-option label="等额本息" value="等额本息"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="设置周期"  :label-width="formLabelWidth">
                        <el-select v-model="form.periods" style="width: 180px" placeholder="期数">
                            <el-option label="3期" value="3"></el-option>
                            <el-option label="6期" value="6"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="月利率"  :label-width="formLabelWidth">
                        <el-input v-model="form.monthInterestRate" style="width: 180px" autocomplete="off" placeholder="">
                            <template slot="append">%</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                <el-form-item label="手续费"  :label-width="formLabelWidth">
                    <el-input v-model="form.handleCost" style="width: 180px" autocomplete="off" placeholder="月服务费率">
                        <template slot="append">%</template>
                    </el-input>
                </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="罚息"  :label-width="formLabelWidth">
                        <el-input v-model="form.penaltyInterestRate" style="width: 180px" autocomplete="off" placeholder="按日复利计算">
                            <template slot="append">%</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="erro()">取 消</el-button>
            <el-button type="primary" @click="pInfo()">确 定</el-button>
        </div>
    </el-dialog>
</div>
<script>
    let addproductInfo = new Vue({
        el:"#addproductInfo",
        data(){
            return{
                dialogFormVisible: false,


                Mond:[],

                //添加产品的数据表单
                form: {

                    productType:'',  //产品类型
                    productName:'', //产品名称
                    ditchNums:'',    // 产品来源
                    productDescp:'', // 产品描述
                    refundType:'',     //还款方式
                    periods:'',           //设置周期
                    monthInterestRate:'',  // 月利率
                    handleCost:'',     //手续费
                    penaltyInterestRate:''  //罚息
                },
                formLabelWidth: '120px'
            }
        },
        methods:{
            erro:function() {
                location.reload();
                dialogFormVisible = false;

            },


            //增加产品模态框后 ， 点击确认键后增加产品
            pInfo(){
                //console.info("yououououo");
                if ( addproductInfo.form.productType ==''){
                    alert("请输入产品类型");
                }else if (addproductInfo.form.productName==''){
                    alert("请填写产品名称");
                }else if (addproductInfo.form.ditchNums==''){
                    alert("请选择产品来源");
                }else if (addproductInfo.form.productDescp==''){
                    alert("请填写产品描述");
                }else if(addproductInfo.form.refundType==''){
                    alert("请设置还款方式");
                }else if(addproductInfo.form.periods==''){
                    alert("请设置周期");
                }else if(addproductInfo.form.monthInterestRate==''){
                    alert("请设置月利率");
                } else if(addproductInfo.form.handleCost==''){
                    alert("请设置手续费");
                } else if(addproductInfo.form.penaltyInterestRate==''){
                    alert("请设置罚息");
                }else
                    {


                    let params =new FormData();


                    params.append("productType",addproductInfo.form.productType);
                    params.append("productName",addproductInfo.form.productName);
                    params.append("ditchNums",addproductInfo.form.ditchNums);
                    params.append("productDescp",addproductInfo.form.productDescp);
                    params.append("refundType",addproductInfo.form.refundType);
                    params.append("periods",addproductInfo.form.periods);
                    params.append("monthInterestRate",addproductInfo.form.monthInterestRate);
                    params.append("handleCost",addproductInfo.form.handleCost);
                    params.append("penaltyInterestRate",addproductInfo.form.penaltyInterestRate);

                    // params.append("roleBean.id","2");
                    axios.post("/cs/product/more",params)
                .then(function (res) {
                        alert("添加成功");
                        console.log(res);
                        location.reload();
                    })
                        .catch(function (error) {

                            console.log(error);
                            addproductInfo.dialogFormVisible = false;
                        });
                }
            }

        }
    });
</script>


<div id="app">
    <el-row class="demo-autocomplete">
        <el-col :span="6">
            产品编号:
            <el-input v-model="pro.productNums" style="width: 150px" size="medium" placeholder="请输入产品编号"></el-input>
        </el-col>

        <el-col :span="6">
            产品名称:
            <el-input v-model="pro.productName"  style="width: 150px" size="medium" placeholder="请输入产品名称"></el-input>
        </el-col>
        <el-col :span="6">
            产品类型:
  <!--            <el-input v-model="pro.productType" style="width:150px"  size="mini" placeholder="请输入内容"></el-input>-->
            <el-select v-model="pro.productType"  size="medium" placeholder="请选择产品类型">
                <el-option label="------" value=""></el-option>
                <el-option label="车贷" value="-1"></el-option>
                <el-option label="信贷" value="1"></el-option>
            </el-select>
            <el-col :span="6">
   <!--   空栏防止输入框往有边跑-->
            </el-col>
        </el-col>
    </el-row>
    <br>
    <el-row>

        <el-col :span="6">
            <el-button type="primary" icon="el-icon-search" size="mini" @click="getData()">查询</el-button>
            <el-button type="primary" icon="el-icon-circle-plus-outline"  size="mini"  @click="addpro()">新增产品</el-button>
            <!--<el-button type="primary" size="small" @click="">导出</el-button>-->
            <el-button type="primary" size="mini"  @click="exportList()"><i class="el-icon-upload el-icon--left">导出</i></el-button>
        </el-col>
    </el-row>

    <br>


    <!--table 模板  ：data 绑定了数据 tableData-->
    <template>
        <el-table
                :data="tableData"
                border
                style="width: 100%;font-size: 10px"
                :row-class-name="tableRowClassName"
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
            <el-table-column prop="productNums"  label="产品编号" width="120">

            </el-table-column>
            <el-table-column prop="productName" label="产品名称" width="120">
            </el-table-column>

            <el-table-column prop="productStatus" label="状态" width="120">
            </el-table-column>

            <el-table-column prop="ditchNums" label="渠道数" width="120">
            </el-table-column>
            <el-table-column prop="endPerson" label="最后更新人" width="120">
            </el-table-column>

            <el-table-column prop="createTime" label="创建时间" :formatter="dateFormatter"  width="200">
            </el-table-column>

            <el-table-column label="操作" width="230">
                <template slot-scope="scope">
                    <!--handleClick 为点击查看点击事件,括号内的scope.row为当前行的所有参数,要拿什么参数,直接 scope.row参数名-->
                    <el-button @click="dialogFormVisibleSelect=true,handleClick(scope.row)" type="text" size="small">查看</el-button>
<!--                    <el-button type="text" size="small"    @click="dialogFormVisible=true,fill_productInfo(scope.row)" >编辑</el-button>-->
                    <el-button @click=" dialogFormVisible=true,fill_productInfo(scope.row)" v-if="scope.row.productStatus=='已禁用'" type="text"  size="mini"><span>编辑</span></el-button>


<!--                    <el-button type="text" size="small"  @click=star(scope.row.id) >启用</el-button>-->
                    <el-button @click="star(scope.row.id,scope.row.productStatus)" v-if="scope.row.productStatus=='已禁用'" type="text"  size="mini"><span>启用</span></el-button>
                    <el-button @click="star(scope.row.id,scope.row.productStatus)" v-if="scope.row.productStatus=='已启用'" type="text"  size="mini"><span>禁用</span></el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

<!--  点击编辑后展示的模态框  -->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisible" fullscreen="true" >
        <el-form :model="form"  :inline="true">
            <el-row>
                <el-col :span="24"><lable>产品基本信息：</lable></el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="产品类型"   :label-width="formLabelWidth">
                        <el-select v-model="form.productType" style="width: 180px" placeholder="请选择">
                            <el-option label="车贷" value="车贷"></el-option>
                            <el-option label="信贷" value="信贷"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="产品名称"  :label-width="formLabelWidth">
                        <el-input v-model="form.productName" style="width: 180px" autocomplete="off" placeholder="请输入名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="产品来源"  :label-width="formLabelWidth">
                        <el-select v-model="form.ditchNums" style="width: 180px" placeholder="请选择来源渠道">
                            <el-option label="渠道id1" value="1"></el-option>
                            <el-option label="渠道id2" value="2"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="产品描述"  :label-width="formLabelWidth">
                        <el-input v-model="form.productDescp" style="width: 540px" autocomplete="off" placeholder=""></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="24">还款方式&利率</el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="还款方式"  :label-width="formLabelWidth">
                        <el-select v-model="form.refundType" style="width: 180px" placeholder="选择还款方式">
                            <el-option label="先息后本" value="先息后本"></el-option>
                            <el-option label="等额本息" value="等额本息"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="设置周期"  :label-width="formLabelWidth">
                        <el-select v-model="form.periods" style="width: 180px" placeholder="期数">
                            <el-option label="3期" value="3"></el-option>
                            <el-option label="6期" value="6"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="月利率"  :label-width="formLabelWidth">
                        <el-input v-model="form.monthInterestRate" style="width: 180px" autocomplete="off" placeholder="">
                            <template slot="append">%</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="手续费"  :label-width="formLabelWidth">
                        <el-input v-model="form.handleCost" style="width: 180px" autocomplete="off" placeholder="月服务费率">
                            <template slot="append">%</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="罚息"  :label-width="formLabelWidth">
                        <el-input v-model="form.penaltyInterestRate" style="width: 180px" autocomplete="off" placeholder="按日复利计算">
                            <template slot="append">%</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible=false,erro()">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisible=false,mod(form.id)">确 定</el-button>
        </div>
    </el-dialog>


            <!--查看的模态框-->
    <el-dialog title="收货地址" :visible.sync="dialogFormVisibleSelect" fullscreen="true" >
        <el-form :model="form"  :inline="true">
            <el-row>
                <el-col :span="24"><lable>产品基本信息：</lable></el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="产品类型"   :label-width="formLabelWidth">
                        <el-select v-model="form.productType" style="width: 180px" placeholder="请选择">
                            <el-option label="车贷" value="车贷"></el-option>
                            <el-option label="信贷" value="信贷"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="产品名称"  :label-width="formLabelWidth">
                        <el-input v-model="form.productName" style="width: 180px" autocomplete="off" placeholder="请输入名称"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="产品来源"  :label-width="formLabelWidth">
                        <el-select v-model="form.fkChannelId" style="width: 180px" placeholder="请选择来源渠道">
                            <el-option label="渠道id1" value="1"></el-option>
                            <el-option label="渠道id2" value="0"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="产品描述"  :label-width="formLabelWidth">
                        <el-input v-model="form.productDescp" style="width: 540px" autocomplete="off" placeholder=""></el-input>
                    </el-form-item>
                </el-col>
            </el-row>
            <br>
            <el-row>
                <el-col :span="24">还款方式&利率</el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="还款方式"  :label-width="formLabelWidth">
                        <el-select v-model="form.refundType" style="width: 180px" placeholder="选择还款方式">
                            <el-option label="先息后本" value="先息后本"></el-option>
                            <el-option label="等额本息" value="等额本息"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="设置周期"  :label-width="formLabelWidth">
                        <el-select v-model="form.periods" style="width: 180px" placeholder="期数">
                            <el-option label="3期" value="3"></el-option>
                            <el-option label="6期" value="6"></el-option>
                        </el-select>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="月利率"  :label-width="formLabelWidth">
                        <el-input v-model="form.monthInterestRate" style="width: 180px" autocomplete="off" placeholder="">
                            <template slot="append">%</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="8">
                    <el-form-item label="手续费"  :label-width="formLabelWidth">
                        <el-input v-model="form.handleCost" style="width: 180px" autocomplete="off" placeholder="月服务费率">
                            <template slot="append">%</template>
                        </el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="罚息"  :label-width="formLabelWidth">
                        <el-input v-model="form.penaltyInterestRate" style="width: 180px" autocomplete="off" placeholder="按日复利计算">
                            <template slot="append">%</template>
                        </el-input>
                    </el-form-item>
                </el-col>
            </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisibleSelect=false,erro()">取 消</el-button>
            <el-button type="primary" @click="dialogFormVisibleSelect=false">确 定</el-button>
        </div>
    </el-dialog>



    <!--Element分頁插件 有待改进-->
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="10"
            layout="total, prev, pager, next, jumper"
            :total="totalCount">
    </el-pagination>


<!--新增产品的div 和 新增模态框-->





</div>
</body>


<script type="text/javascript" th:inline="javascript">


    let demo = new Vue({
        el: "#app", //绑定的div
        data() {
            return {
                // 总数据
                tableData:[],
                // 默认显示第几页
                currentPage:1,
                // 总条数，根据接口获取数据长度(注意：这里不能为空)
                totalCount:1,
                // 个数选择器（可修改）
                pageSizes:[1,2,3,4],
                // 默认每页显示的条数（可修改）
                PageSize:1,
                tableData: [],  //  datas数据 中的数组goods

                //这是点击编辑之后，原本隐藏的 编辑框就变为true，就显示编辑框
                dialogFormVisible:false,

                dialogFormVisibleSelect:false,

                pro: {  //将搜素的数据封装一个类
                    productNums:'',
                    productName: '',
                    productType: ''
                },

                Mond:[],

               // dialogFormVisible: false,
                form: {
                    id:'',
                    productNums:'',
                    productType:'',  //产品类型
                    productName:'', //产品名称
                    ditchNums:'',    // 产品来源渠道
                    productDescp:'', // 产品描述
                    refundType:'',     //还款方式
                    periods:'',           //设置周期
                    monthInterestRate:'',  // 月利率
                    handleCost:'',     //手续费
                    penaltyInterestRate:''  //罚息
                },
                formLabelWidth: '120px'
            };
        },
        methods: {


            //查询所有的渠道全名称和Id
            findAllDitch: ()=>{
                //alert("到查询所有的渠道全名称和Id!");
                axios.get([[@{monditch/all}]],{
                    params:{
                    }
                }).then(res => {//此处一定要用 箭头函数  不然this 就不是this
                    // alert("demo.roleInfos.length="+demo.roleInfos.length);
                    // console.info("asgasg");
                    // console.info(res);
                    // console.info("渠道全名称="+res);

                    //demo.ditchNums.splice(0,demo.roleInfos.length);

                    for(let i=0;i<res.data.length;i++){
                        demo.Mond.push(res.data[i]);
                    }
                        // demo.Mond=res.data;
                        // console.info(demo.Mond);


                })
                    .catch(error => {
                        console.log(error);
                    });
            },


            //导出功能
            exportList:function (){
                //转换一下，提交转换后的对象
                let tableDataJson=JSON.stringify(demo.tableData);
                axios.post([[@{product/exportList}]],tableDataJson,
                    {headers:
                        {'Content-Type':'application/json;'}
                })
            .then((response)=>{
                alert("导出成功！")
                //console.log(response)
            })
                    .catch((err)=>{console.log(err)});
            },

            //修改产品状态
            star:function(ids,sta){
                let id = ids;
                let status =sta;

                let params = new FormData();
                params.append("id",id);
                params.append("productStatus",status)

                axios.put("product/upsta",params
                ).then(res => {
                    console.log(res);
                    location.reload();
                }).catch(function (error) {
                    console.log(error);
                });
            },

            // 日期格式化
            dateFormatter (row, column) {
                let datetime = row.createTime;
                if(datetime){
                    datetime = new Date(datetime);
                    let y = datetime.getFullYear() + '-';
                    let mon = datetime.getMonth()+1 + '-';
                    let d = datetime.getDate() +' ';
                    let hourTemp=datetime.getHours();
                    if (hourTemp<10){
                        hourTemp='0'+hourTemp;
                    }
                    let hour = hourTemp+':';
                    let minuteTemp=datetime.getMinutes();
                    if (minuteTemp<10){
                        minuteTemp='0'+minuteTemp;
                    }
                    let minute = minuteTemp+':';
                    let secondTemp=datetime.getSeconds();
                    if (secondTemp<10){
                        secondTemp='0'+secondTemp;
                    }
                    let second = secondTemp;
                    return y + mon + d+ hour+ minute+ second;
                }
                return ''
            },

            fill_productInfo:function(productInfo){

               //alert("我到编辑的画面了")
                console.log("productInfo.telephone="+productInfo.productType);



                //教训：一定是demo.   不要写  this.
                demo.form.id=productInfo.id
                demo.form.productType=productInfo.productType ;
                demo.form.productName=productInfo.productName ;
                demo.form.ditchNums=productInfo.ditchNums;
                demo.form.productDescp=productInfo.productDescp;
                demo.form.periods=productInfo.periods;
                demo.form.monthInterestRate =productInfo.monthInterestRate ;
                demo.form.handleCost =productInfo.handleCost ;
                demo.form.penaltyInterestRate=productInfo.penaltyInterestRate;
                demo.form.refundType=productInfo.refundType;



            },
            mod:function(id){
                let params =new FormData();
                params.append("id",demo.form.id);
                params.append("productType",demo.form.productType);
                params.append("productName",demo.form.productName);
                params.append("ditchNums",demo.form.ditchNums);
                params.append("productDescp",demo.form.productDescp);
                params.append("refundType",demo.form.refundType);
                params.append("periods",demo.form.periods);
                params.append("monthInterestRate",demo.form.monthInterestRate);
                params.append("handleCost",demo.form.handleCost);
                params.append("penaltyInterestRate",demo.form.penaltyInterestRate);
                axios.put([[@{/product/}]] + id,params).then(res => {
                    console.log(res);
                    location.reload();
                }).catch(function (error) {
                    console.log(error);
                });
            },

            erro:function(){
              //编辑 全屏模态框 的取消按钮对应的方法

            },



            //分页显示的方法和代码
            getData(){
                let statusRaw='';
                if (this.pro.productType=='-1'){
                    statusRaw='车贷';
                }else if (this.pro.productType=='1'){
                    statusRaw='信贷';
                }
                // 这里使用axios，使用时请提前引入
                axios.get("/cs/product/page",{
                        params:{
                            limit:10,
                            pageNum:this.currentPage,
                            offset:(this.currentPage-1)*10,
                            productNums:this.pro.productNums,
                            productName:this.pro.productName,
                            productType:statusRaw
                        }
                    },{emulateJSON: true},
                    {
                        headers:{"Content-Type": "application/x-www-form-urlencoded;charset=utf-8",}
                    }
                ).then(reponse=>{
                    console.log(reponse)
                    // 将数据赋值给tableData
                    this.tableData=reponse.data.rows

                    // 将数据的长度赋值给totalCount
                    this.totalCount=reponse.data.total

                    console.info("第一数据"+reponse.data.rows)
                    console.info("第二数据"+reponse.data.rows.data)
                    console.info(reponse.data.rows)

                })
            },

            // 分页
            // 每页显示的条数
            handleSizeChange(val) {
                // 改变每页显示的条数
                this.PageSize=val
                // 注意：在改变每页显示的条数时，要将页码显示到第一页
                this.currentPage=1
            },
            // 显示第几页
            handleCurrentChange(val) {
                // 改变默认的页数
                this.currentPage=val
                this.getData()
            },

            //为鼠标移动上去的js样式
            tableRowClassName({row, rowIndex}) {
                if (rowIndex % 2 === 1) {
                    return 'success-row';

                } else if (rowIndex % 2 === 2) {
                    return 'warning-row';
                }
                return '';
            },
            //查看的点击事件 line=scope.row,当前行的所有参数
            handleClick(productInfo) {


                demo.form.id=productInfo.id
                demo.form.productType=productInfo.productType ;
                demo.form.productName=productInfo.productName ;
                demo.form.fkChannelId=productInfo.ditchNums;
                demo.form.productDescp=productInfo.productDescp;
                demo.form.periods=productInfo.periods;
                demo.form.monthInterestRate =productInfo.monthInterestRate ;
                demo.form.handleCost =productInfo.handleCost ;
                demo.form.penaltyInterestRate=productInfo.penaltyInterestRate;
                demo.form.refundType=productInfo.refundType;
            },

            //新增 app
            addpro:function () {
                //alert("辛巴")
                addproductInfo.dialogFormVisible=true;

                 addproductInfo.Mond=demo.Mond;
            }

        },//method方法截止
        created : function () {  //挂载完成，就是页面内容加载完成后
            this.getData();
            this.findAllDitch();
        }
    });

</script>
</html>